<template>
  <div class="maxbox">
           <!-- 网页背景部分,这个其实你可以自定义网页背景，我只是为了好看，所有用了这个 -->
 <div v-once style="maxHeight：414px;overflow:hidden" v-html="maxbg"></div>
    <div class="max">
      <!-- 头部标题 -->
      <div class="head">
         
        <div class="btn">
          <van-icon name="arrow-down" size="28" @click="off" />
        </div>
        <div class="text van-ellipsis">
          <p v-show="this.currentIndex >= 0" class="van-ellipsis">
            {{ currentSong.name }}
          </p>
          <p v-show="this.currentIndex >= 0" class="van-ellipsis">
            {{ currentSong.ar }}
          </p>
          <p v-show="this.currentIndex == -1">音乐未加载</p>
        </div>
        <div class="share">
          <van-icon name="share-o" size="28" @click="share" />
        </div>
      </div>

      <!-- 中间唱片 -->
      <div  class="middle">
        <div class="bgc  Hole">
          <img
            src="@/assets/logo.png"
            v-show="this.currentIndex == -1"
          />
        </div>
        <div class="img" @click="lrcBoxs" v-show="lrcbox">
          <img
            v-show="this.currentIndex >= 0"
            :src="currentSong.picUrl + '?param=300y300'"
            alt=""
            :class="{ pause: !playing }"
          />
          <img
            v-show="this.currentIndex == -1"
            src="@/assets/logo.png"
            alt=""
            :class="{ pause: !playing }"
          />
        </div>
        <!-- 背景后板歌词 -->
        <div class="lrc_box_list" @click="lrcBoxs"  v-show="!lrcbox">
          <div class="box_p">
            <div class="p" ref="p">
              <p
                class="van-ellipsis"
                v-for="(item, key, index) in lrc"
                :key="index"
                :class="{
                  color:
                    allKeys[index] < parseInt(currentTime) &&
                    parseInt(currentTime) <= allKeys[index + 1],
                }"
              >
                {{ handleScroll(key, index) }}
                {{ item }}
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- 歌词前板显示 -->
      <div class="lrc_box" v-show="lrcbox">
        <p
          class="van-ellipsis"
          v-for="(item, key, index) in lrc"
          :key="index"
          v-show="
            allKeys[index] < parseInt(currentTime) &&
            parseInt(currentTime) <= allKeys[index + 1]
          "
        >
          {{ item }}
        </p>
      </div>
      <!-- 播放底部区域 -->
      <div class="play_icon">
        <!-- 喜欢按钮 -->
        <div class="menu">
          <div class="likesMusic">
            <span
              class="iconfont"
              @click="addLoveMuisc(currentSong)"
              :class="{ love: isLove }"
              >&#xe86f;</span
            >
          </div>
          <div
            v-show="lrcbox"
            class="msg_content"
            @click="toComment(currentSong.id, currentSong.name)"
          >
            <van-icon
              name="chat-o"
              :badge="total + '+'"
              size="27"
              color="#fff"
            />
            <span>音乐评论</span>
          </div>
          <!-- 音乐详情 -->
          <div class="popup">
            <van-icon name="more-o" @click="show = true" size="30" color="#fff" />
            <van-popup
              round
              v-model="show"
              duration=".5"
              position="bottom"
              :style="{ maxHeight: '80%' }"
            >
              <div class="title">
                <h3>歌曲详情</h3>
              </div>
              <div class="boxpopup">
                <div
                  class="music_box"
                  v-for="(item, index) in currentSong.arList"
                  :key="index.id"
                  @click="toMusicIndex(item.arid)"
                >
                  <div class="index">
                    <span class="iconfont">&#xe66c;</span>
                    <span> 演唱:</span>
                  </div>
                  <div class="text van-ellipsis">
                    <p class="van-ellipsis">{{ item.arname }}</p>
                  </div>
                  <div class="slice"><van-icon name="arrow" size="18" /></div>
                </div>
                <div class="music_box" @click="toAlbumList(currentSong.alId)">
                  <div class="index">
                    <span class="iconfont">&#xe504;</span>
                    <span> 专辑:</span>
                  </div>
                  <div class="text van-ellipsis">
                    <span class="van-ellipsis">{{ currentSong.al }}</span>
                  </div>
                  <div class="slice"><van-icon name="circle" size="16" /></div>
                </div>
              </div>
            </van-popup>
          </div>
        </div>

        <!-- 进度条 -->
        <div class="progress">
          <div>{{ currentTime | formatTime }}</div>
          <van-slider
            v-model="ProGress"
            @change="onChange"
            active-color="#34c37e"
            bar-height=".1875rem"
        @drag-start="    starts"	
@drag-end="end"

          
          >
          <template #button>
    <div   class="custom-button"></div>
  </template>
           
          </van-slider>

          <div>{{ duration | formatTime }}</div>
        </div>
        <!-- 播放按钮控件 -->
        <div class="icon">
          <!-- 播放模式 -->
          <span class="iconfont" @click="changeMode" v-show="modePlays == 0"
            >&#xe611;</span
          >
          <span  class="iconfont" @click="changeMode" v-show="modePlays == 1"
            >&#xe617;</span
          >
          <span class="iconfont" @click="changeMode" v-show="modePlays == 2"
            >&#xe612;</span
          >
          <!-- 上一首 -->
          <span class="iconfont" @click="preve()">&#xf0069;</span>
          <!-- 播放/暂停 -->
          <span @click="play" v-if="!playing" class="iconfont plays"
            >&#xe696;</span
          >
          <span @click="stopPlay" v-else class="iconfont plays">&#xe6ad;</span>
          <!-- 下一首 -->
          <span class="iconfont" @click="next()">&#xf006a;</span>
          <!-- 播放列表 -->
          <span class="iconfont" @click="showPopup">&#xe636;</span>
        </div>
      </div>
    </div>
    <!-- 音乐列表 -->
    <van-popup
      v-model="list"
      round
      duration=".5"
      lock-scroll
      position="bottom"
      :style="{ height: '60%' }"
    >
      <MusicMusicList />
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapGetters } from "vuex";
import { GetlyricAPI, GetCommentAPI } from "@/api/api.js";
import MusicMusicList from "./music_list.vue";
export default {
  name: "MusicMaxPlayer",
  props: ["currentTime", "duration"],
  components: {
    MusicMusicList,
  },

  data() {
    return {
shownum:true,
      list: false,
      isLove: false,
      show: false,
      lrcbox: true,
      lrc: {},
      allKeys: [],
      total: 0,
      maxbg:`  <div id="max99"> <div id="scene"  class="stars-wrapper">
      <div data-depth="0.00" class="layer"></div>
      <div data-depth="0.30" class="stars-cluster stars-cluster-1">
        <div class="star star-1"></div>
        <div class="star star-2"></div>
        <div class="star star-3"></div>
        <div class="star star-4"></div>
        <div class="star star-5"></div>
        <div class="star star-6"></div>
        <div class="star star-7"></div>
        <div class="star star-8"></div>
        <div class="star star-9"></div>
        <div class="star star-10"></div>
        <div class="star star-11"></div>
        <div class="star star-12"></div>
        <div class="star star-13"></div>
        <div class="star star-14"></div>
        <div class="star star-15"></div>
        <div class="star star-16"></div>
        <div class="star star-17"></div>
        <div class="star star-18"></div>
        <div class="star star-19"></div>
        <div class="star star-20"></div>
        <div class="star star-21"></div>
        <div class="star star-22"></div>
        <div class="star star-23"></div>
        <div class="star star-24"></div>
        <div class="star star-25"></div>
        <div class="star star-26"></div>
        <div class="star star-27"></div>
        <div class="star star-28"></div>
        <div class="star star-29"></div>
        <div class="star star-30"></div>
        <div class="star star-31"></div>
        <div class="star star-32"></div>
        <div class="star star-33"></div>
        <div class="star star-34"></div>
        <div class="star star-35"></div>
        <div class="star star-36"></div>
        <div class="star star-37"></div>
        <div class="star star-38"></div>
        <div class="star star-39"></div>
        <div class="star star-40"></div>
      </div>
      <div data-depth="0.50" class="stars-cluster stars-cluster-2">
        <div class="star star-1"></div>
        <div class="star star-2"></div>
        <div class="star star-3"></div>
        <div class="star star-4"></div>
        <div class="star star-5"></div>
        <div class="star star-6"></div>
        <div class="star star-7"></div>
        <div class="star star-8"></div>
        <div class="star star-9"></div>
        <div class="star star-10"></div>
        <div class="star star-11"></div>
        <div class="star star-12"></div>
        <div class="star star-13"></div>
        <div class="star star-14"></div>
        <div class="star star-15"></div>
        <div class="star star-16"></div>
        <div class="star star-17"></div>
        <div class="star star-18"></div>
        <div class="star star-19"></div>
        <div class="star star-20"></div>
        <div class="star star-21"></div>
        <div class="star star-22"></div>
        <div class="star star-23"></div>
        <div class="star star-24"></div>
        <div class="star star-25"></div>
        <div class="star star-26"></div>
        <div class="star star-27"></div>
        <div class="star star-28"></div>
        <div class="star star-29"></div>
        <div class="star star-30"></div>
        <div class="star star-31"></div>
        <div class="star star-32"></div>
        <div class="star star-33"></div>
        <div class="star star-34"></div>
        <div class="star star-35"></div>
        <div class="star star-36"></div>
        <div class="star star-37"></div>
        <div class="star star-38"></div>
        <div class="star star-39"></div>
        <div class="star star-40"></div>
      </div>
      <div data-depth="0.90" class="stars-cluster stars-cluster-3">
        <div class="star star-1"></div>
        <div class="star star-2"></div>
        <div class="star star-3"></div>
        <div class="star star-4"></div>
        <div class="star star-5"></div>
        <div class="star star-6"></div>
        <div class="star star-7"></div>
        <div class="star star-8"></div>
        <div class="star star-9"></div>
        <div class="star star-10"></div>
        <div class="star star-11"></div>
        <div class="star star-12"></div>
        <div class="star star-13"></div>
        <div class="star star-14"></div>
        <div class="star star-15"></div>
      </div>
    </div></div>`
    };
  },

  mounted() {
    this.isLoves();
    this.GetlyricAPI();
    this.GetCommentAPI();
  },
  computed: {
    ...mapGetters([
      "playing",
      "likeList",
      "modePlays",
      "PlayListLength",
      "progress",
      "currentIndex",
      "currentSong",
    ]), //计算数据
    
    ProGress: {
      get() {
        return this.progress;
      },
      set(v) {},
    },
  },
  filters: {
    formatTime(val) {
      let m = parseInt(val / 60);
      let s = parseInt(val % 60);
      m = m > 9 ? m : "0" + m;
      s = s > 9 ? s : "0" + s;
      return m + ":" + s;
    },
  },
  watch: {
   
    modePlays(val) {
      switch (val) {
        case 0:
          Toast("顺序播放");
          break;
        case 1:
          Toast("单曲循环");
          break;
        case 2:
          Toast("随机播放");
          break;
        default:
          break;
      }
    },
    currentSong(val) {
      //判断喜欢音乐是否存在
      for (let i = 0; i < this.likeList.length; i++) {
        const element = this.likeList[i];
        if (element.id == JSON.stringify(val.id)) {
          this.isLove = true;
          return;
        }
      }
      this.$nextTick(function () {
        this.isLove = false;
      });
    },
    likeList(val) {
      this.isLoves();
    },
  },
  methods: {
 
    share() {
      Toast("主人还没有开发！！");
    },
    GetCommentAPI() {
      if (!this.currentSong.id) {
        return;
      } else {
        GetCommentAPI({ id: this.currentSong.id, limit: 1 }).then((res) => {
          if (res.status == 200) {
            if (res.data.total >= 100) {
              this.total = 99;
              return;
            } else {
              this.total = res.data.total;
              return;
            }
          }
        });
      }
      //获取评论数
    },
    toComment(id) {
      if (!id) {
        Toast("音乐未加载");
        return;
      }
      this.off();
      this.$router.push({
        path: "/VueMusicCommentArea",
        query: {
          id,
          t: Date.now(), //刷新相同组件
        },
      });
    },
    handleScroll(key, index) {
      //歌词滚动
      const p = this.$refs.p;
      if (
        key < this.currentTime &&
        key > this.currentTime - (this.allKeys[index + 1] - this.allKeys[index])
      ) {
        p.style.top = -(index - 2) * 40 + "px";
      }
    },
    lrcBoxs() {
      //歌词面板切换
      this.lrcbox = !this.lrcbox;
    },
  
    onChange(value) {
     
      //进度条
      let time = parseInt(this.duration * value * 0.01);
      this.$emit("fatherMethod", time);
     
    },
    starts(){
  this.lrcbox=true
},
end(){
  this.lrcbox=false
},
    toMusicIndex(id) {
      this.show = false;
      this.off();
      this.$router.push({
        path: "/MusicIndex",
        query: {
          t: Date.now(), //刷新相同组件
          id,
        },
      });
    },
    toAlbumList(id) {
      if (!id) {
        Toast("音乐未加载");
        return;
      }
      this.show = false;
      this.off();
      this.$router.push({
        path: "MusicAlbumList",
        query: {
          id,
          t: Date.now(), //刷新相同组件
        },
      });
    },
    isLoves() {
      for (let i = 0; i < this.likeList.length; i++) {
        const element = this.likeList[i];
        if (element.id == this.currentSong.id) {
          this.isLove = true;
          return;
        }
      }
      this.isLove = false;
    },
    addLoveMuisc(music) {
      if (this.currentIndex < 0) {
        Toast("音乐未加载");
        return;
      }
      this.isLove = !this.isLove;
      //添加喜欢音乐
      if (this.isLove) {
        this.$store.commit("SET_ADDLOVELIST", music); //添加歌曲
        Toast("已加入喜欢列表！");
      } else {
        for (let i = 0; i < this.likeList.length; i++) {
          const element = this.likeList[i];
          if (element.id == music.id) {
            this.$store.commit("SET_SLICEMUSIC", i);
            this.isLove = false;
            Toast("已从列表中清除！");
            return;
          }
        }
      }
    },
    off() {
      // 关闭大屏
      this.$store.commit("SET_FULLSCREEN", false);
    },
    // 上一首
    preve() {
      if (!this.currentSong.id) {
        return;
      }
      if (this.PlayListLength == 1) {
        Toast("当前列表只有一首");
        return;
      } else {
        let index = this.currentIndex - 1;
        if (index == -1) {
          index = this.PlayListLength - 1;
        }
        this.$store.commit("SET_PLAYNEXT", index);
      }
    },
    //下一首
    next() {
      if (!this.currentSong.id) {
        return;
      }
      if (this.PlayListLength == 1) {
        Toast("当前列表只有一首");
        return;
      } else {
        let index = this.currentIndex + 1;
        if (index == this.PlayListLength) {
          index = 0;
        }
        this.$store.commit("SET_PREVIOUS", index);
      }
    },
    // 播放
    play() {
      this.$store.commit("SET_PLAY", true);
    },
    stopPlay() {
      this.$store.commit("SET_STOPPLAY", false);
    },
    // 打开音乐列表
    showPopup() {
      this.list = true;
    },
    changeMode() {
      //切换模式
      let index = this.modePlays + 1;
      if (index > 2) {
        index = 0;
      }
      this.$store.commit("SET_CHANGE_MODE", index);
    },
    getrand(m, n) {
      var rand = Math.floor(Math.random() * (n - m + 1)) + m;
      return rand;
    },
    GetlyricAPI() {
      if (!this.currentSong.id) {
        return;
      } else {
        GetlyricAPI({ id: this.currentSong.id }).then((res) => {
          if (res.status == 200) {
            //过滤歌词
            var arr = {};
            const lyrics = res.data.lrc.lyric.split("\n");
            var reg = /\[\d*:\d*(\.|:)\d*]/g;
            for (let i = 0; i < lyrics.length; i++) {
              var timeRegArr = lyrics[i].match(reg);
              if (!timeRegArr) continue;
              //替换 获取歌词
              var content = lyrics[i].replace(timeRegArr, "");
              //获取时间
              var s = timeRegArr[0];
              //取出分 和 秒
              var min = Number(s.match(/\[\d*/i).toString().slice(1));
              var second = Number(s.match(/\:\d*/i).toString().slice(1));
              // 计算出时间
              let times = min * 60 + second * 1;
              arr[times] = content;
            }
            this.lrc = arr;
            this.getkey(arr);
          }
        });
      }
    },
    getkey(arr) {
      for (const key in arr) {
        this.allKeys.push(key);
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../static/mbg.css");
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.max {
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
 
  color: #4cd492;
  box-sizing: border-box;
  // 标题
  .head {
    height: 3.4375rem;
    padding-top: 0.625rem;
    display: flex;
    color: #fff;
    .share,
    .btn {
      width: 2.5rem;
      height: 2.5rem;
      display: flex;
      justify-content: center;
    }
    .text {
      flex: 1;
      text-align: center;
      p {
        margin: 0.3125rem 0.625rem;
        line-height: 1.25rem;
      }
      p:nth-child(1) {
        font-size: 1rem;
      }
      p:nth-child(2) {
        font-size: 0.75rem;
      }
    }
  }
  // 中间唱片
  .middle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 18.75rem;
    width: 100%;
    .color {
      color: #fff;
      font-size: 1.125rem;
    }
    // 背景歌词
    .lrc_box_list {
      position: relative;
      height: 21.5625rem;
      width: 100%;
      overflow: hidden;
      font-size: 0.9375rem;
      .box_p {
        position: relative;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 12.5rem;
        width: 100%;
        .p {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          opacity: 0.9;
          p {
            height: 2.5rem;
            line-height: 2.5rem;
          }
        }
      }
    }
    .img {
      background-color: #000;
      border-radius: 50%;
      width: 12.5rem;
      height: 12.5rem;
      padding: 2.5rem;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        animation: rotate 20s linear infinite;
      }
      .pause {
        animation-play-state: paused;
      }
    }
  }
  // 歌词
  .lrc_box {
    height: 3.125rem;
    line-height: 3.125rem;
    width: 100%;
    font-family: "微软雅黑";
    font-size: 1.125rem;
    text-align: center;
    overflow: hidden;
  }
  .menu {
    height: 2.5rem;
    margin: 0rem 0.9375rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .popup,
    .likesMusic {
      width: 1.875rem;
    }
    .iconfont {
      font-size: 1.875rem;
      color: #f7f8f8;
    }
    .love {
      color: #fe0132;
    }
    .nolove {
      color: #f7f8f8;
    }
    .title {
      width: 100%;
      height: 2.5rem;
      line-height: 2.5rem;
      font-size: 1.125rem;
      color: #333;
    }

    .msg_content {
      display: flex;
      flex-direction: column;
      font-size: 0.75rem;
      span {
        color: #fff;
      }
      .van-info {
        font-size: 0.75rem;
      }
    }
    .van-popup {
      background-color: #fff;
    }
    .boxpopup {
      margin: 1.25rem;
      margin-top: 0;
      .music_box {
        margin: 0.625rem 0;
        padding: 0 0.625rem;
        margin-top: 0;
        display: flex;
        background-color: #f7f8f8;
        border-radius: 0.625rem;
        font-size: 1rem;
        height: 2.5rem;
        line-height: 2.5rem;
        .index {
          width: 3.75rem;
          color: #fe0132;
          margin-right: 0.625rem;
          font-size: 0.875rem;
          .iconfont {
            font-size: 1rem;
            color: #fe0132;
          }
        }
        .text {
          flex: 1;
          text-align: left;
          font-size: 0.875rem;
        }
        .slice {
          width: 2.5rem;
          color: #888;
        }
      }
    }
  }
  // 按钮
  .play_icon {
    height: 10rem;
    .progress {
      display: flex;
      height: 1.875rem;
      line-height: 1.875rem;
      align-items: center;
      padding: 0.3125rem 0.9375rem;
      .van-slider {
        margin: 0 0.625rem;
        .custom-button {
          width: 0.625rem;
          height: 0.625rem;
          line-height: 0.625rem;
          text-align: center;
          margin-left: 0.3125rem;
          background-color: #34c37e;
          border-radius: 50%;
        }
      }
      .van-slider::before {
        position: absolute;
        top: -0.625rem;
        right: 0;
        bottom: -0.625rem;
        left: 0;
        content: "";
      }
      div:nth-child(3),
      div:nth-child(1) {
        height: 1.875rem;
        line-height: 1.875rem;
        color: #f7f8f8;
      }
      .van-progress {
        flex: 1;
        margin: 0 0.625rem;
      }
    }
    .icon {
      height: 3.75rem;
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        flex: 1;
      }
      .iconfont {
        font-size: 1.875rem;
        color: #fff;
      }
    }
    .plays {
      font-size: 3.125rem !important;
    }
  }
  // 虚化背景
  .bgc {
    z-index: -999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
      opacity: 0.6;
      filter: blur(1.25rem);
      transform: scale(2);
    }
  }
}
  @keyframes ripple{
  0% {
    box-shadow: 0 0 0 0 rgb(248 248 255 / 10%), 0 0 0 20px rgb(248 248 255 / 10%), 0 0 0 40px rgb(248 248 255 / 10%), 0 0 0 60px rgb(248 248 255 / 10%);
}
100% {
    box-shadow: 0 0 0 20px rgb(230 230 250 / 10%), 0 0 0 40px rgb(230 230 250 / 10%), 0 0 0 60px rgb(230 230 250 / 10%), 0 0 0 70px rgb(230 230 250 / 0%);
}
  }
  @keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.Hole, .Hole:before, .Hole:after {
	display: flex;
	border-radius: 50%;
	animation: anim 180s linear infinite;
}

@keyframes anim {
	0% {transform: rotate(0deg)}
  100% {transform: rotate(-360deg)}
}

.Hole{
	width: 30vw;
	height: 30vh;
	box-shadow: 1vh 0 3vh 2vh #777, 
       inset -2vh 0 3vh 4vh #666,
             -1vh -1vh 35vh 0 #555;
}

.Hole:before, .Hole:after {
	content: '';
	background: #484f9f;
	position: relative;
 
  top: 6vh;
}

.Hole:before {
  width: 3vmin;
  height: 3vmin;
  left: 40vmin;
  box-shadow: #333 0 0 2vh 2vh,
              #a1926b 2vh 4vh 2vh 0.3vh;
}
 .maxbox{width:100%!important;

 overflow-y: hidden!important;
 }
 .maxbox::-webkit-scrollbar {
width:0;
	height: 0;
  overflow: auto;
	background-color: transparent;
display: none;
}
</style>